<template>
<div>
  <el-form label-position="right" label-width="120px" ref="form" :rules="rules" :model="form">
     <el-row :gutter="10">
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-form-item label="任务类型" prop="type">
           <el-select v-model="form.type" clearable placeholder="请选择任务类型" style="width: 100%;">
             <el-option
               v-for="item in typeList"
               :key="item.id"
               :label="item.name"
               :value="item.id">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="任务名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入任务名称"></el-input>
         </el-form-item>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-form-item label="任务图标" prop="icon">
           <el-input type="text" v-model="form.icon" class="task-form-item" placeholder="请输入任务名称" style="display: none;"></el-input>
           <div @click="selectImage">
             <el-image :src="form.iconurl" class="task-image">
               <div slot="error" class="image-slot">
                 <i class="el-icon-picture-outline"></i>
               </div>
             </el-image>
           </div>
         </el-form-item>
       </el-col>
      <!-- <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-form-item label="任务名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入任务名称"></el-input>
         </el-form-item>
       </el-col> -->
       <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
           <el-form-item label="老人类型" prop="older_type">
             <el-select v-model="form.older_type" @change="selectChangeType" :disabled="!!form.id" placeholder="请选择" style="width: 100%;">
               <el-option
                 v-for="item in dictData.elderSource"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
           </el-form-item>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
           <el-form-item label="每月服务次数" prop="ci_num">
             <el-input v-model="form.ci_num" type="number" :disabled="!!form.id" placeholder="如:4次"></el-input>
           </el-form-item>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-form-item label="单次服务时长" prop="ci_long">
           <el-input v-model="form.ci_long" type="number" :disabled="!!form.id" placeholder="如:2小时"></el-input>
         </el-form-item>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
           <el-form-item label="收费类型" prop="pay_type">
             <!-- <el-select v-model="form.pay_type" :disabled="!!form.id || form.older_type === '1'" placeholder="请选择收费类型"> -->
             <el-select v-model="form.pay_type" :disabled="!!form.id" placeholder="请选择收费类型" style="width: 100%;">
                 <el-option
                   v-for="item in dictData.payType"
                   :key="item.value"
                   :label="item.label"
                   :value="item.value">
                 </el-option>
             </el-select>
           </el-form-item>
       </el-col>
       <el-col v-if="form.pay_type === '2'" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
           <el-form-item label="收费金额" prop="pay_num">
             <el-input v-model="form.pay_num" :disabled="!!form.id" placeholder="收费金额" type="number"></el-input>
           </el-form-item>
       </el-col>
       <el-col v-if="form.pay_type === '3'" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
         <el-row :gutter="10">
           <el-col :span="12">
             <el-form-item label="收费金额" prop="pay_num">
               <el-input v-model="form.pay_num" :disabled="!!form.id" placeholder="收费金额" type="number"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="最大时长" prop="pay_max_time">
               <el-input v-model="form.pay_max_time" :disabled="!!form.id" placeholder="最大时长" type="number"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="超出费用/时" prop="pay_chao_num">
               <el-input v-model="form.pay_chao_num" :disabled="!!form.id" placeholder="超出费用/时" type="number"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-col>
       <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
         <el-form-item label="佣金类型" prop="cost_type">
           <!-- <el-select v-model="form.cost_type" :disabled="!!form.id || form.older_type === '1'" placeholder="请选择佣金类型"> -->
           <el-select v-model="form.cost_type" :disabled="!!form.id" placeholder="请选择佣金类型" style="width: 100%;">
               <el-option
                 v-for="item in dictData.payType"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
               </el-option>
           </el-select>
         </el-form-item>
       </el-col>
       <el-col v-if="form.cost_type === '2'" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
           <el-form-item label="佣金金额" prop="cost_num">
             <el-input v-model="form.cost_num" :disabled="!!form.id" placeholder="佣金金额" type="number"></el-input>
           </el-form-item>
       </el-col>
       <el-col v-if="form.cost_type === '3'" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
         <el-row :gutter="10">
           <el-col :span="12">
             <el-form-item label="佣金金额" prop="cost_num">
               <el-input v-model="form.cost_num" :disabled="!!form.id" placeholder="佣金金额" type="number"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="最大时长" prop="cost_max_time">
               <el-input v-model="form.cost_max_time" :disabled="!!form.id" placeholder="最大时长" type="number"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="超出费用/时" prop="cost_chao_num">
               <el-input v-model="form.cost_chao_num" :disabled="!!form.id" placeholder="超出费用/时" type="number"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-col>
       <el-col :xs="24" :sm="12" :md="24" :lg="24" :xl="24">
           <el-form-item label="备注" prop="msg">
             <el-input type="textarea" v-model="form.msg" placeholder="请输入备注"></el-input>
           </el-form-item>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="8">
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
             <el-radio label="1">正常</el-radio>
             <el-radio label="0">停用</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item label="大数据界面展示">
           <el-radio-group v-model="form.is_show">
             <el-radio label="1">展示</el-radio>
             <el-radio label="0">不展示</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item label="是否可预约">
           <el-radio-group v-model="form.yue">
             <el-radio label="1">可预约</el-radio>
             <el-radio label="0">不可预约</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-col>
     </el-row>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
  <!-- 选择任务图标 -->
    <el-dialog
      title="任务图标"
      :visible.sync="dialogVisible"
      width="1000px"
      :append-to-body="true"
      :close-on-click-modal="false">
      <icon-select @cancle="dialogVisible = false" :list="iconList" @load="load" @select="selectIcon"></icon-select>
    </el-dialog>
</div>
</template>

<script>
// import * as APIAdmin from '@/api/admin'
import * as APITask from '@/api/task'
import { unixToDate } from "@/utils"
import dictData from "@/utils/dictionary";
import iconSelect from './icon-select'
export default {
  name: 'task-add',
  components: {
    iconSelect
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    teamList: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    const validatorIcon = (rule, value, callback) => {
       if (!this.form.hasOwnProperty('icon') || !this.form.icon) {
         return callback(new Error("请选择任务图标"));
       } else {
         callback()
       }
    };
    return {
      dictData,
      images: '',
      // 显示图标窗口
      dialogVisible: false,
      iconList: [],
      list: [],
      typeList: [],
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请选择任务图标', validator: validatorIcon, trigger: 'change' }
        ],
        type: [
          { required: true, message: '请选择任务类型', trigger: 'change' }
        ],
        older_type: [
          { required: true, message: '请选择老人类型', trigger: 'change' }
        ],
        cost_type: [
          { required: true, message: '请选择收费类型', trigger: 'change' }
        ],
        pay_type: [
          { required: true, message: '请选择扣费类型', trigger: 'change' }
        ]
      },
      typeList:[]
    }
  },
  mounted () { this.$init() },
  methods: {
     // 静态化加载
     async $init () {
       const values = await Promise.all([
         // 任务类型
         APITask.taskTypeList(),
         // 类型图标
         APITask.tasktypeIconlist()
       ])
       // console.log(values)
       const typeList = values[0]['data']['list'];
       const iconList = values[1]['data']['list'];
       this.typeList = typeList
       const list = []
       typeList.forEach(item => {
         const children = []
         iconList.forEach(ite => {
           if (item.id === ite.type) {
             children.push(ite)
           }
         })
         list.push({
           name: item.name,
           id: item.id,
           children
         })
       })
       this.list = list
       this.iconList = list
     },
     // 选择图片
     selectImage () {
       this.dialogVisible = true
     },
     selectChangeType (value) {
       if (value === '1') {
         // this.$set(this.form, 'pay_type', '1')
         // this.$set(this.form, 'cost_type', '1')
       }
     },
     selectIcon (item) {
       const formItem = JSON.parse(JSON.stringify(item));
       this.form.name = formItem.name;
       this.form.icon = formItem.id;
       this.form.iconurl = formItem.img;
       this.dialogVisible = false;
     },
    lead () {
      this.form.msg = this.mealTemp
      this.$forceUpdate()
    },
    // 添加老人家属
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            APITask.taskEdit(this.form).then(res => {
              this.cancle()
              this.load()
            })
          } else {
            APITask.taskAdd(this.form).then(res => {
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.form = JSON.parse(JSON.stringify(newval))
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .task-image {
    width: 80px;
    height: 80px;
    position: absolute;
    cursor: pointer;
    border: 1px solid #f5f7fa;
    .image-slot {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      background: #f5f7fa;
      color: #909399;
    }
    &:hover {
      border: 1px dashed #487eea;
    }
    i {
      font-size: 20px;
    }
  }
</style>
